<script setup lang="ts">
import { ref ,defineProps} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getCategoryList } from '@/api'



defineProps({
  categoryList:{
    type:Array,
    default:[]
  }

})

const goToSearchPage = (item,index) => {

  if(index == 0){
    uni.navigateTo({
      url: `/pages/walls/index`
    })
  }else if(index == 1){
    uni.navigateTo({
      url: `/pages/grilles/index`
    })
  }else if(index == 2){
    uni.navigateTo({
      url: `/pages/door/index`
    })
  }else if(index == 3){
    uni.navigateTo({
      url: `/pages/cupboard/index`
    })
  }else if(index == 4){
    uni.navigateTo({
      url: `/pages/hardware/index`
    })
  }else{
    uni.navigateTo({
      url: `/pages/search/index?c1Id=${item.path}`
    })
  }
}
</script>

<template>
  <view class="category-container">
    <MidLayout>
      <view class="title">
        <view class="zh">五大品类产品展示</view>
        <view class="en">Five categories of product display</view>

      </view>

      <u-scroll-list>
        <view class="grid">
        <view class="max-width" v-for="(item,index) in categoryList" :key="item.id">

          <BounceButton :image="item.image"  height="300rpx" 
          @mytap="goToSearchPage(item,index)"
          width="190rpx"></BounceButton>
        </view>
      </view>
      </u-scroll-list>
      <!-- <view class="grid">
        <view class="max-width" v-for="(item,index) in categoryList" :key="item.id">

          <BounceButton :image="item.image"  height="270rpx" 
          @mytap="goToSearchPage(item,index)"
          width="170rpx"></BounceButton>
        </view>
      </view> -->
    </MidLayout>
  </view>
</template>

<style scoped lang="scss">
.image {
  height: 270rpx;
  background-color: #ccc;
  border-radius: 14rpx;
  background-position: center;
  background-size: contain;
}
.category-container {
  
  .grid {
    height: 300rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap:10rpx;
  }
}
</style>
